body {    
	display: grid;
    height: 100%;
	font-family: "Georgia", "Times New Roman", Times, serif;
	font-size: 1.5em;
	background-color: #00FFFF;
	background-repeat: repeat;
	background-attachment: scroll;
}
p {font-size: 0.8em;}
#masthead {
	text-align: center;
	width: 100%;
}
#navigation {display: inline-block;
	position: relative;
	float: left;
	width: 20%;
	margin-top: 10px;
	margin-bottom: 10px;
}
#content {display: flex;
	float: left;
	position: relative;
	width: 80%;
	margin-top: -340px;
	margin-left: 170px;
	padding: 10px;
	background-color: #00ffff;
	border-radius: 45px;
	
}
#content1 {display: inline-block;
	float: left;
	position: relative;
	width: 80%;
	margin-top: -340px;
	margin-left: 170px;
	padding: 10px;
	background-color: #00ffff;
	border-radius: 45px;
	
}
#footer {display: inline-block;
	text-align: center;
	width: 100%;
}
#masthead h1 {
	color: #000080;
}
#masthead h3 {
	color: #000080;
}
#content h1,h2,h3,h4,h5,h6 {
	color: #0000FF;
}
#footer a {
	border-color: #0000FF;
	color: #000080;
	text-decoration: underline;
}
#footer a:hover {
	color: #853;
	text-decoration: none;
}
.Btn {
    position: relative;
    width: 150px;
    height: 55px;
    border-radius: 45px;
    border: none;
    background-color: rgb(60, 188, 255);
    color: white;
    box-shadow: 0px 10px 10px rgb(50, 180, 253) inset,
        0px 5px 10px rgba(50, 180, 253, 0.212),
        0px -10px 10px rgb(50, 180, 255) inset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
		font-size: 1.2em;
}
.Btn1 {
    position: relative;
    width: 90px;
    height: 45px;
    border-radius: 45px;
    border: none;
    background-color: rgb(55, 188, 255);
    color: red;
    box-shadow: 0px 10px 10px rgb(50, 180, 253) inset,
        0px 5px 10px rgba(50, 180, 253, 0.212),
        0px -10px 10px rgb(50, 180, 255) inset;
    cursor: pointer;
    display: inline-block;
    align-items: center;
    justify-content: center;
		font-size: 0.7em;
}
.Bmic
{
	position: relative;
    width: 150px;
    height: 55px;
    border-radius: 45px;
    border: none;
    background-color: rgb(60, 188, 120);
    color: white;
    box-shadow: 0px 10px 10px rgb(60, 180, 110) inset,
        0px 5px 10px rgba(60, 180, 110, 0.212),
        0px -10px 10px rgb(60, 180, 110) inset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
	font-size:1.1em;
}
.Btn::before {
    width: 70%;
    height: 2px;
    position: absolute;
    background-color: rgba(60, 188, 255, 0.7);
    content: "";
    filter: blur(1px);
    top: 7px;
    border-radius: 50%;
}
.Btn::after {
    width: 70%;
    height: 2px;
    position: absolute;
    background-color: rgba(60, 188, 255, 0.1);
    content: "";
    filter: blur(1px);
    bottom: 7px;
    border-radius: 50%;
}
.Btn:hover, .Bmic:hover, .Btn1:hover {
    animation: jello-horizontal 0.9s both;
}
@keyframes jello-horizontal {
    0% {transform: scale3d(1, 1, 1);}
    30% {transform: scale3d(1.25, 0.75, 1);}
    40% {transform: scale3d(0.75, 1.25, 1);}
    50% {transform: scale3d(1.15, 0.85, 1);}
    65% {transform: scale3d(0.95, 1.05, 1);}
    75% {transform: scale3d(1.05, 0.95, 1);}
    100% {transform: scale3d(1, 1, 1);}
}
.messagedefilant {
  display: block;
  margin: 40px auto;
  border-radius: 40px;
  padding: 0;
  overflow: hidden;
  position: relative;
  width: 50%;
  max-width: 1300px;
  height: 60px;
}
.messagedefilant div {
  position: absolute;
  min-width: 100%;
}
.messagedefilant div:after {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  white-space: nowrap;
  top:0;
}
.messagedefilant div:after {
  position: absolute;
  top:0; left:0;
  content:attr(data-text);
  animation: defilement2 10s infinite linear;
  background: #bcd;
}
@keyframes defilement2 {
  0% { margin-left: 100%; }
  100% { margin-left: -100%; }
}